<template>
  <div class="handle">
    <div class="title">
      <van-icon name="arrow-left" color="#ffffff" @click="skip_confirm"/>
      <van-col>商城订单</van-col>
      <van-icon name="delete-o" color="#ffffff" />
    </div>

    <van-tabs class="navigation1">
      <van-tab class="van-tab1" title="进行中" name="a">
        <ul class="navigation2">
          <li
            v-for="(item, index) in list1"
            :key="index"
            :class="item.class"
            @click="change(item.id)"
          >
            <i>{{ item.num }}</i>
            <span>{{ item.name }}</span>
          </li>
        </ul>

        <ul class="cargo" v-for="(item, index) in list2" :key="index">
          <li>
            <img src="https://img0.baidu.com/it/u=1265978186,1556871981&fm=26&fmt=auto" alt="" />
            <i>{{ item.condition }}</i>
          </li>
          <li>
            <span>{{ item.name }}</span>
            <span
              ><i>{{item.describe}}</i></span
            >
            <span>￥{{ item.price }}</span>
            <span>购买时间：2021/12/22 20:00</span>
            <span>
              <i>提心发货</i>
              <i>联系商家</i>
            </span>
          </li>
        </ul>
      </van-tab>
      <van-tab title="已完成" name="b"></van-tab>
      <van-tab title="已关闭" name="c"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getOrder,  getOrderList } from '../../../api/index.js'
export default {
  data() {
    return {
      result: [],
      value: 1,
      list1: [
        {
          id: 1,
          num: "0",
          name: "待发货",
          class: "li",
        },
        {
          id: 2,
          num: "0",
          name: "待付款",
          class: "",
        },
        {
          id: 3,
          num: "0",
          name: "已发货",
          class: "",
        },
        {
          id: 4,
          num: "0",
          name: "退款中",
          class: "",
        },
      ],
      list2: [
        {
          src: "https://img0.baidu.com/it/u=1265978186,1556871981&fm=26&fmt=auto",
          condition: "买家已付款",
          name: "电脑桌",
          taxt1_1: "凡积简约现代",
          taxt1_2: "钢化玻璃电脑桌",
          taxt2_1: "台式家用办公电脑",
          taxt2_2: "简约学习书桌写字台",
          money: "198",
          date: "2017/12/13",
        },
      ],
    };
  },
  methods: {
    change(index) {
      this.list1.map((item) => (item.class = ""));
      if (index == 1) return (this.list1[0].class = "li");
      if (index == 2) return (this.list1[1].class = "li");
      if (index == 3) return (this.list1[2].class = "li");
      this.list1[3].class = "li";
    },
    skip_confirm(){
      this.$router.push('/confirm')
    },
    async initOrderId() {
      let obj = {
        isPay: 1,
        userID: window.localStorage.getItem('user_id')
      }
      let { data, meta } = await getOrder(obj);
      console.log(data);
      this.OrderList(data.join(','))

    },
    // 根据id获取已支付商品列表
    async OrderList(val) {
      let { data } = await getOrderList({ goodsID: val })
      console.log(data);
      this.list1[0].num = data.length;
      this.list2 = data
    }
  },
  created() {
    this.initOrderId()
  }
};
</script>

<style lang="less" scoped>
.handle {
  width: 100%;
  min-height: 1334px;
  background-color: #efefef;

  .title {
    height: 54px;
    background-color: #ff5555;
    padding: 0;
    padding-top: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .van-icon {
      padding: 10px 20px 0 16px;
      font-size: 42px;
    }
    .van-col {
      font-size: 18px;
      color: #ffffff;
      font-size: 34px;
      line-height: 54px;
    }
  }

  .navigation1 {
    .van-tab1 {
      margin-top: 20px;
      .navigation2 {
        width: 100%;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.8);
        background-color: #ffffff;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        li {
          width: 25%;
          display: flex;
          padding: 24px 0;
          flex-direction: column;
          text-align: center;
          p {
            width: 100%;
            height: 2px;
            margin: 0;
            margin-top: 24px;
          }
        }
        .li {
            border-bottom: 2px solid #ff5555;
          }
      }

      .cargo {
        font-size: 16px;
        background-color: #ffffff;
        margin: 0 20px;
        padding: 20px;
        display: flex;
        li:nth-child(1) {
          display: flex;
          flex-direction: column;
          img {
            width: 220px;
            height: 177px;
            margin-bottom: 15px;
          }
        }
        li:nth-child(2) {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          span:nth-child(3) {
            margin: 20px 0;
            color: #ff5555;
          }
          span:nth-child(5) {
            margin-top: 30px;
            padding-left: 150px;
            i {
              font-style: normal;
              border: 1px solid #333;
              padding: 4px 10px;
              margin-right: 20px;
            }
          }
        }
      }
    }
    /deep/ .van-tab--active {
      color: #ff5555;
    }
    /deep/ .van-tabs__line {
      background-color: #ffffff;
    }
  }
}
</style>